﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Events
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Events</h2>

<div id="tabs"> 
    <ul> 
		<li><a href="#clickEvents">Click</a></li> 
		<li><a href="#bindEvents">Bind</a></li> 
		<li><a href="#liveEvents">Live</a></li> 
		<li><a href="#customEvents">Custom</a></li> 
		
	</ul> 

    <div id="clickEvents">
        <h3>Click</h3>
        <pre>
        $(selector).click(function(){});
        $(selector).click();
        </pre>

        <button type="button" id="clickButton">Click Me</button> $("#clickButton").click(function () { alert("You clicked me"); });
        <br />

        <button type="button" id="delgatebutton">I click Click Me</button>$("#delgatebutton").click(function () { $("#clickButton").click(); });
        

        <h3>See also</h3>
        <ul>
            <li>DoubleClick</li>
            <li>Blur</li>
            <li>Change</li>
            <li>Focus</li>
            <li>Focus</li>
            <li>mousedown</li>
            <li>mouseup</li>
            <li>mouseover</li>
            <li>mouseout</li>
            <li>mouseenter</li>
            <li>mouseeleave</li>
        </ul>
    </div>
    <div id="bindEvents">

        <h3>Bind, Unbind, and Trigger</h3>
        <pre>
        $(selector).bind('click', function(){});
        $(selector).unbind('click');
        $(selector).trigger('click');
        </pre>

        <button type="button" id="bindEvent">Click Me</button> $("#clickButton").bind("click", function () { alert("You clicked me"); });
        <br />
        <button type="button" id="triggerEvent">I click Click Me</button> $("#clickButton").trigger("click"); 
        <br />
        <button type="button" id="unbindEvent">Remove the Click hander</button> $("#clickButton").unbind("click");
        
    </div>

    <div id="liveEvents">
        <h3>Live, Die</h3>
        <pre>
        $(selector).live('click', function(){});
        $(selector).die('click');
        </pre>

        <button type="button" id="liveCreate">Create New button</button>
        <button type="button" id="killHandlers">Kill Click Handlers</button>

        <ul id="liveButtons">
        </ul>            
    </div>

    <div id="customEvents">
        <h3>Custom Events with Live, Bind, and Trigger</h3>

        <pre>
        $(selector).bind('any_name_you_want', function);
        $(selector).trigger('any_name_you_want');
        </pre>

        <button id="customEventButton" type="button">Fire Custom event</button>

        <div id="customEventDiv" style="display:none;"> Look, now I'm here  </div>

    </div>
</div>



</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="CssContent" runat="server">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="JavascriptContent" runat="server">
<script type="text/javascript">

    $(function () {
        $("#tabs").tabs();

        // for click tab
        $("#clickButton").click(function () { alert("You clicked me"); });

        $("#delgatebutton").click(function () { $("#clickButton").click(); });

        // for bind tab
        $("#bindEvent").bind("click", function () {
            alert("You clicked me");
        });

        $("#triggerEvent").click(function () {
            $("#bindEvent").trigger("click");
        });

        $("#unbindEvent").click(function () {
            $("#bindEvent").unbind("click");
        });

        // for live tab
        $("#liveCreate").click(function () {
            $("#liveButtons").append("<li><button type='button'>New Button</button></li>");
        });



        $("ul button").live("click", liveClick);

        $("#killHandlers").click(function () { $("ul button").die("click", liveClick); });

        // custom events tab

        $("#customEventDiv").bind("lorumIpsum", function () { $(this).toggle(); });
        $("#customEventButton").click(function () { $("#customEventDiv").trigger("lorumIpsum"); });

    });


    function liveClick() {
        alert("Now how did that happen");
    }
</script>
</asp:Content>
